<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 -->
<!-- 
* @desc:任务实例详情信息
* @fileName:information.vue
* @author:zhouyongjie@yzbdl.ac.cn
* @date:2022-4-13
!-->

<script setup lang="ts">
//引入API封装方法
import { getCurrentInstance, onMounted, ref } from "vue";
import nodata from "@/assets/img/host-config/Nodata.png";
//判断显隐过滤器
import { showTooltip } from "@/common/util/tooltip";
import { showErrorMessage } from "@/common/message";

const { proxy } = getCurrentInstance() as any;
const props = defineProps({
  informationParam: Object as any,
});
const informationPng = ref("");
let drawershow = ref(false);

const image: any = ref(null);

/**
 * @description: 滚轮缩放
 * @param {any} e
 * @return void
 */
const rollImg = (e: any) => {
  let transform = image.value.style.transform;
  let zoom =
    transform.indexOf("scale") != -1
      ? +transform.split("(")[1].split(")")[0]
      : 1;
  zoom += e.wheelDelta / 1200;
  if (zoom > 0.1 && zoom < 3) {
    image.value.style.transform = "scale(" + zoom + ")";
  }
};

const imgWrap: any = ref(null);
/**
 * @description: 鼠标拖拽
 * @param {any} e
 * @return void
 */
const moveImg = (e: any) => {
  let wrap = imgWrap.value;
  let img = image.value;
  let x = e.pageX - img.offsetLeft;
  let y = e.pageY - img.offsetTop;
  // 添加鼠标移动事件
  wrap.addEventListener("mousemove", move);

  function move(e: any) {
    img.style.left = e.pageX - x + "px";
    img.style.top = e.pageY - y + "px";
  }

  // 添加鼠标抬起事件， 鼠标抬起， 将事件移除
  img.addEventListener("mouseup", () => {
    wrap.removeEventListener("mousemove", move);
  });
  // 鼠标离开父级元素，把事件移除
  wrap.addEventListener("mouseout", () => {
    wrap.removeEventListener("mousemove", move);
  });
};

/**
 * @description: 查看图片详情
 * @return void
 */
const openImg = () => {
  drawershow.value = true;
};

// 图片状态
const imgState: any = ref("");
/**
 * @description:获取流程图
 * @return void
 */
const getImage = () => {
  const res = proxy.$HTTP.get({
    url: `/task/instance/transImage/${props.informationParam.id}/${props.informationParam.serverProgramId}`,
  });
  res
    .then((res: any) => {
      imgState.value = res.code;
      if (res.code === 200) {
        informationPng.value = res.data;
      }
    })
    .catch((response: any) => {
      showErrorMessage({ message: response.data });
    });
};

onMounted(() => {
  //获取图片地址
  getImage();
});
</script>

<template>
  <div class="information">
    <div class="informationContent">
      <el-tooltip
        class="box-item"
        effect="customized"
        :content="props.informationParam.taskName"
        :disabled="showTooltip(props.informationParam.taskName, 550)"
        placement="top"
        transition="none"
        :hide-after="0"
      >
        <div class="taskname">{{ props.informationParam.taskName }}</div>
      </el-tooltip>

      <el-tooltip
        :content="props.informationParam.taskResourceName"
        transition="none"
        :hide-after="0"
        :disabled="showTooltip(props.informationParam.taskResourceName, 200)"
        placement="top"
      >
        <div class="resourcename">
          资源名称：<span>{{ props.informationParam.taskResourceName }}</span>
        </div>
      </el-tooltip>

      <div class="resourcetype">
        资源类型：<span>{{ props.informationParam.taskResourceType }}</span>
      </div>
      <div class="hours">
        耗时：<span>{{ props.informationParam.diff }}</span>
      </div>
      <div class="state">
        状态：<span>{{ props.informationParam.state }}</span>
      </div>

      <el-tooltip
        :content="props.informationParam.serverProgramName"
        :disabled="showTooltip(props.informationParam.serverProgramName, 200)"
        placement="top"
        transition="none"
        :hide-after="0"
      >
        <div class="servicenode">
          服务节点：<span>{{ props.informationParam.serverProgramName }}</span>
        </div>
      </el-tooltip>

      <div class="starttime">
        开始时间：<span>{{ props.informationParam.beginTime }}</span>
      </div>
      <div class="endtime">
        结束时间：<span>{{ props.informationParam.createTime }}</span>
      </div>
    </div>
    <div class="informationImg" style="position: relative">
      <el-icon
        @click="openImg"
        class="mt-full-screen"
        :size="20"
        title="查看图片详情"
        v-if="
          props.informationParam.state !== '初始化失败' &&
          props.informationParam.state !== '跳过' &&
          props.informationParam.state !== '失败' &&
          imgState === 200
        "
      >
        <FullScreen />
      </el-icon>
      <img
        :src="nodata"
        class="dataPng"
        v-if="
          props.informationParam.state === '初始化失败' ||
          props.informationParam.state === '跳过' ||
          props.informationParam.state === '失败' ||
          imgState !== 200
        "
      />
      <div
        v-else
        class="imgPng"
        :style="{ backgroundImage: 'url(' + informationPng + ')' }"
        style="background-size: 700px 480px"
      ></div>
    </div>
    <el-dialog
      v-model="drawershow"
      v-if="drawershow"
      title="图片详情"
      width="80%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div ref="imgWrap" class="wrap" @mousewheel.prevent="rollImg">
        <img :src="informationPng" ref="image" @mousedown.prevent="moveImg" />
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.mt-full-screen {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}

.information {
  width: 100%;
  padding-top: 20px;

  .informationContent {
    width: 700px;
    height: 160px;
    background-color: #f6f6f6;
    position: relative;

    div {
      span {
        color: #000000;
        font-weight: 700;
      }
    }

    .taskname {
      position: absolute;
      font-family: PingFang SC;
      font-weight: 700;
      color: #000;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 600px;
      font-size: 18px;
      left: 15px;
      top: 15px;
    }

    .resourcename {
      position: absolute;
      font-family: PingFang SC;
      width: 220px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: rgb(136, 135, 135);
      font-size: 14px;
      left: 56px;
      top: 53px;
    }

    .resourcetype {
      position: absolute;
      font-family: PingFang SC;
      color: rgb(136, 135, 135);
      width: 220px;
      font-size: 14px;
      left: 56px;
      top: 78px;
    }

    .hours {
      position: absolute;
      font-family: PingFang SC;
      width: 220px;
      color: rgb(136, 135, 135);
      font-size: 14px;
      left: 84px;
      top: 103px;
    }

    .state {
      position: absolute;
      width: 220px;
      font-family: PingFang SC;
      color: rgb(136, 135, 135);
      font-size: 14px;
      left: 84px;
      top: 128px;
    }

    .servicenode {
      position: absolute;
      width: 220px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-family: PingFang SC;
      color: rgb(136, 135, 135);
      font-size: 14px;
      right: 194px;
      top: 53px;
    }

    .starttime {
      position: absolute;
      width: 220px;
      font-family: PingFang SC;
      color: rgb(136, 135, 135);
      font-size: 14px;
      width: 220px;
      right: 194px;
      top: 78px;
    }

    .endtime {
      position: absolute;
      width: 220px;
      font-family: PingFang SC;
      color: rgb(136, 135, 135);
      font-size: 14px;
      width: 220px;
      right: 194px;
      top: 103px;
    }
  }

  .informationImg {
    width: 700px;
    height: 480px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    background-color: #f6f6f6;

    .imgPng {
      width: 700px;
      height: 480px;
    }
  }
}

.wrap {
  position: relative;
  width: 100%;
  height: 800px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    position: absolute;
    cursor: pointer;
  }
}
</style>
